<!DOCTYPE html>
<html lang="en">

<head>
  {include file="common/meta" /}
  <style>
    #img {
      width: 200px;
    }
  </style>
</head>

<body>
  <div class="x-body">
    <blockquote class="layui-elem-quote">
      <button class="layui-btn layui-btn-danger" onclick="back()">
        返回
      </button>
    </blockquote>

    <div class="layui-form layui-form-pane layui-tab-item layui-show">
      <form method="post" enctype="multipart/form-data">

        <!-- 商品名称 -->
        <div class="layui-form-item">
          <label for="pro_name" class="layui-form-label">名称</label>
          <div class="layui-input-inline">
            <input type="text" id="pro_name" name="pro_name" required autocomplete="off" value="" class="layui-input">
            <span id="name_txt" style="line-height: 38px;"></span>
          </div>
        </div>

        <!-- 分类 -->
        <div class="layui-form-item">
          <label for="L_city" class="layui-form-label">商品类别</label>
          <div class="layui-input-inline">
            <select name="pro_type" id="pro_type" lay-verify="required">
              <option value="">请选择商品类别</option>
              {foreach $type as $item}
              <option value="{$item.id}">{$item.name}
              </option>
              {/foreach}
            </select>
          </div>
        </div>

        <!-- 原价 -->
        <div class="layui-form-item">
          <label for="pro_price" class="layui-form-label">原价</label>
          <div class="layui-input-inline">
            <input type="number" id="pro_price" name="pro_price" required autocomplete="off" value=""
              class="layui-input">
            <span id="price_txt" style="line-height: 38px;"></span>
          </div>
        </div>

        <!-- 库存 -->
        <div class="layui-form-item">
          <label for="pro_stock" class="layui-form-label">库存</label>
          <div class="layui-input-inline">
            <input type="number" id="pro_stock" name="pro_stock" required autocomplete="off" value=""
              class="layui-input">
            <span id="stock_txt" style="line-height: 38px;"></span>
          </div>
        </div>

        <!-- 商品状态 -->
        <div class="layui-form-item">
          <label for="pro_flag" class="layui-form-label">商品状态</label>
          <div class="layui-inline">
            <div class="layui-input-inline" style="width: 300px;">
              <input type="radio" name="pro_flag" value="1" title="新品">
              <input type="radio" name="pro_flag" value="2" title="热销">
              <input type="radio" name="pro_flag" value="3" title="推荐">
            </div>
          </div>
        </div>

        <!-- 图集 -->
        <div class="layui-form-item">
          <div class="avatar-add">
            <button type="button" class="layui-btn upload-img" onclick="thumbs.click()">
              <i class="layui-icon">&#xe67c;</i>上传图集
            </button>
            <input type="file" id="thumbs" name="thumbs[]" hidden multiple="multiple">
            <div class="thumbs">

            </div>
            <span class="loading"></span>
          </div>
        </div>

        <!-- 上传商品详情 -->
        <div class="layui-form-item layui-form-text">
          <label for="L_sign" class="layui-form-label">商品详情</label>
          <div class="layui-input-block">
            <textarea placeholder="请输入商品详情" id="L_sign" name="content" autocomplete="off" class="layui-textarea"
              style="height: 80px;"></textarea>
          </div>
        </div>


        <!-- 确认按钮 -->
        <div class="layui-form-item">
          <button class="layui-btn" id="editbtn" key="set-mine" type="submit">确认修改</button>
        </div>

      </form>
    </div>

  </div>
</body>

<script>
  function getObjectURL(file) {
    var urlarr = [];

    for (let i = 0; i < file.length; i++) {
      let url = null;
      if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file[i]);
      } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file[i]);
      } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file[i]);
      }

      urlarr.push(url);
      console.log(url);
    }

    return urlarr;
  }

  function back() {
    window.location.href = "{:url('admin/product/index')}"
  }

  layui.use(['layer', 'jquery', 'form'], function () {
    var layer = layui.layer
    var form = layui.form
    var $ = layui.jquery

    // 头像预览图
    $("#thumbs").on("change", function () {
      console.log(this.files);
      // 获取当前文件路径
      var urlarr = getObjectURL(this.files);
      let str = ""
      // 将路径放入img标签, 展示预览图
      $.each(urlarr, function (index, value) {
        str += `<img id="img" src="${value}">`;
      })
      $(".thumbs").html(str)
    })
  })

</script>

</html>